<template>
    <div>
        <WeekRangePicker 
            style="width: 300px;" 
            @change="change" 
            v-model="value" 
            :disabled="disabled" 
            :editable="editable"
            :clearable="clearable" 
            :size="size" 
            :type="type" 
            :range-separator="rangeSeparator"
            :start-placeholder="startPlaceholder" 
            :end-placeholder="endPlaceholder" 
            :readonly="readonly"
            :format="format" 
            :value-format="valueFormat" 
            :align="align" 
            :picker-options="pickerOptions"
            :popper-class="popperClass" 
            :unlink-panels="unlinkPanels">
        </WeekRangePicker>
    </div>
</template>
<script>
// import WeekRangePicker from './dist/main.js'
import WeekRangePicker from './packages'
import "./theme-chalk/index.css" //element-ui的样式
export default {
    components: {
        WeekRangePicker: WeekRangePicker
    },
    data() {
        return {
            value: [],
            disabled: false,
            editable: false,
            clearable: false,
            readonly: false,
            unlinkPanels: true,
            align: "left",
            format: 'yyyy 第 WW 周',
            size: 'normal',
            type: 'weekrange',
            rangeSeparator: "至",
            startPlaceholder: "开始时间",
            endPlaceholder: '结束时间',
            valueFormat: "yyyy-MM-dd",
            pickerOptions: {
                disabledDate: false,
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                firstDayOfWeek: 5
            },
            popperClass: "weekrange",
            defaultTime: ["12:00:00", "13:00:00"],
        }
    },
    methods: {
        //跨周选择的默认时间为第一周的第一天和第二周的最后一天。
        change(time) {
            console.log(time, '已经选中的时间');
        }
    }
}

</script>


<style lang="less" scoped></style>